<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="root">

    </div>
    <button id='newItem' style="margin-top:5px;background-color: rgb(16, 236, 236);">新建记录项</button>
    <script>
        // const getObj=window.androidObject.getAndroidFormat();
        // let realObj=JSON.parse(getObj);
        const realObj={
           data:{
            '1':'待记录项1',
            '2':'待记录项2',
            '3':'带记录项3',
            '4':'待记录项4',
            '5':'待记录项5'
           },
           choiceType:'button',
           step:2
        };
        let rootDiv=document.getElementById('root');
        for(let i in realObj['data']){
            console.log(i);
            let newDiv=document.createElement('div');
            let newInput=document.createElement('input');
            newInput.setAttribute('type','text');
            newInput.value=realObj['data'][i];
            button2=document.createElement("button");
            button2.textContent="删除";
            button2.style.backgroundColor='#0f8';
            button2.style.marginLeft="5px";
            newInput.onchange-function(){
                realObj['data'][i]=newInput.value;
                console.log(realObj);
            };
            button2.onclick=function(){
                newDiv.parentNode.removeChild(newDiv);
                delete realObj['data'][i];
                console.log(realObj);
            };
            newInput.onchange=function(){
                realObj['data'][i]=newInput.value;
                console.log(realObj);
            }
            newDiv.appendChild(newInput);
            newDiv.appendChild(button2);
            rootDiv.appendChild(newDiv);
        }
        const btn=document.getElementById("newItem");
        btn.onclick=function(){
           let ele= document.createElement("div");
           let input=document.createElement("input");
           input.setAttribute("type","text");
           input.value="新建记录项";
           let button2=document.createElement("button");
           button2.textContent="删除";
           button2.style.backgroundColor='#0f8';
           button2.style.marginLeft="5px";
           ele.append(input);
           ele.append(button2);
           rootDiv.appendChild(ele);
           let lastIndex=Object.keys(realObj["data"]).length-1;
           let key=Object.keys(realObj["data"])[lastIndex];
           let index=parseInt(key)+1;
           let lastKey=index+"";
            //给两个按钮加上点击事件
            button2.onclick=function(){
                ele.parentNode.removeChild(ele);
                delete realObj["data"][lastKey];
                console.log(ele);
                console.log(realObj);
            }
            //先给input添加onchange事件
            input.onchange=function(){
                realObj["data"][lastKey]=input.value;
                console.log(realObj);
            }
           realObj["data"][lastKey]="新建选择";
           console.log(realObj);
        }
        window.getJSFormat=function(){
                return JSON.stringify(realObj);
            };
            // console.log(getJSFormat());

        
    </script>
</body>
</html>